<template>
  <div>
    <the-header-top></the-header-top>
    <logo-bar></logo-bar>
    <div class="success-container">
      <div class="success-content">
        <div class="success-title">
          <template v-if="type === 'bill'">{{$t('message.billPaySuccess')}}</template>
          <template v-else>{{$t('message.paySuccessThen')}}</template></div>
        <p class="success-text">{{$t('message.payByBank')}}：<span class="success-price">{{ $t('message.currencySymbol') }}{{payResult.goodsPrice}}</span></p>
        <p class="success-text">{{$t('message.transationNumber')}}：{{payResult.orderNumber}}</p>
        <template v-if="type === 'bill'">
          <p class="success-text">{{$t('message.orderInfo')}}：{{payResult.orderInfo}}</p>
          <!-- 还款期数区分了还一期与多期的显示 -->
          <p class="success-text" v-if="payResult.startNumber === payResult.endNumber">{{$t('message.amortizationNum')}}：{{payResult.startNumber}}/{{payResult.stages}} {{$t('message.time')}}</p>
          <p class="success-text" v-else>{{$t('message.amortizationNum')}}：{{payResult.startNumber}}/{{payResult.stages}}-{{payResult.endNumber}}/{{payResult.stages}} {{$t('message.time')}}</p>
        </template>
        <template v-else>
          <p class="success-text">{{$t('message.whenToSend')}}</p>
        </template>

        <div class="success-btn-group">
          <template v-if="type === 'bill'">
            <button type="button" class="btn btn-orange" @click="toBillArise">{{$t('message.readBill')}}</button>
          </template>
          <template v-else>
            <button type="button" class="btn btn-orange" @click="toOrderDetail">{{$t('message.readOrder')}}</button>
            <button type="button" class="btn btn-white" @click="continueShopping">{{$t('message.continueShop')}}</button>
          </template>
        </div>
      </div>
      <div class="success-guess" v-if="type !== 'bill'">
        <div class="guess-title">
          {{$t('message.youLike')}}
        </div>
        <ul class="guess-content">
          <li v-for="(item, index) in products">
            <v-product-item-detail :product="item"></v-product-item-detail>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import TheHeaderTop from '@/components/base/TheHeaderTop'
import LogoBar from '@/components/base/LogoBar'
import VProductItemDetail from '@/components/base/VProductItemDetail'
import { getCookie } from '@/util/util'

export default {
  name: 'PaySuccess',
  components: {
    TheHeaderTop,
    LogoBar,
    VProductItemDetail
  },
  data () {
    return {
      products: []
    }
  },
  computed: {
    goodId () {
      return '561'
    },
    type () {
      return this.$route.query.type
    },
    payResult () {
//      return JSON.parse(sessionStorage.getItem('payResult'))
      return JSON.parse(getCookie('payResult'))
    }
  },
  methods: {
    toOrderDetail () {
      this.$router.push({path: '/personal/order/detail', query: {orderId: this.payResult.orderNumber}})
    },
    continueShopping () {
      this.$router.push({
        path: '/'
      })
    },
    toBillArise () {
      this.$router.push({
        path: '/personal/bill/detail',
        query: {orderId: this.payResult.orderId}
      })
    }
  },
  created () {
    if (this.type !== 'bill') {
      this.$ajax.guessYouLike(this.goodId, 'like').then((res) => {
        if (res.code === 200) {
          this.products = res.data
        } else if (res.code === 202) {
          console.log('请求数据失败数据为空')
        }
      })
    }
  }
}
</script>

<style scoped>
.success-container {
  min-width: 1200px;
  padding: 40px 0;
  background-color: #f5f5f5;
}

.success-content {
  width: 1120px;
  margin: 0 auto;
  padding: 60px 40px;
  background-color: #fff;
}

.success-title {
  height: 30px;
  line-height: 30px;
  padding-left: 46px;
  margin-bottom: 41px;
  font-size: 24px;
  background: url(../../assets/images/icon_success.png) no-repeat left center / contain;
}

.success-text {
  height: 20px;
  line-height: 20px;
  padding-left: 46px;
  margin-bottom: 14px;
  font-size: 14px;
  color: #666;
}

.success-price {
  color: #ff600a;
}

.success-text:last-of-type {
  margin-bottom: 0 !important;
}

.success-btn-group {
  height: 40px;
  font-size: 0;
  padding-left: 46px;
  margin-top: 40px;
}

.btn {
  width: 96px;
  height: 40px;
}

.btn-white {
  margin-left: 16px;
}

.success-guess {
  width: 1200px;
  margin: 60px auto 0;
  position: relative;
}

.guess-title {
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  color: #666;
  text-align: center;
  position: relative;
}

.guess-title:before, .guess-title:after {
  content: '';
  display: block;
  width: 530px;
  height: 0;
  border-top: 1px solid #e0e0e0;
  position: absolute;
  top: 15px;
}

.guess-title:before {
  left: 0;
}

.guess-title:after {
  right: 0;
}

.guess-content {
  margin-top: 28px;
  background-color: #fff;
  overflow: hidden;
}

.guess-content li {
  float: left;
  width: 224px;
  margin-right: 20px;
  padding: 20px;
  box-sizing: border-box;
  position: relative;
}

.guess-content li:after {
  content: '';
  display: block;
  width: 0;
  height: 120px;
  border-right: 1px solid #e6e6e6;
  position: absolute;
  top: 60px;
  right: -10px;
}

.guess-content li:last-child {
  margin-right: 0;
}
</style>
